<template>
	<view class="container">
		<view class="list-item">
			
			<view class="dis-flex" @click="navTo('/pages/course/detail_text?id='+info.course_info.id)">
				<view class="list-img">
					<image :src="info.goods_snap.discover" mode="aspectFill"></image>
				</view>
				<view class="list-title">
					<view class="list-title-name">{{info.goods_snap.title}}</view>
					<view class="list-detail">
						<view style="width: 140rpx;">下单日期：</view>
						<view class="pad-r22">{{info.xd_date}}</view>
					</view>
					<view class="list-op">
						<view class="font-w600">{{info.goods_score}}积分</view>
						
					</view>
				</view>
				
			</view>
			<view  class="line"></view>
			<view style="display: flex;margin: 24rpx;flex-direction: column;" class="font-s-14">
				<view class="dis-flex">
					<view style="flex:1">订单编号</view>
					<view><text class="font-color-9">{{info.order_sn}}</text><text class="font-color-9" style="margin: 0rpx 20rpx;">|</text><text @click="clipData(info.order_sn)">复制</text></view>
				</view>
				<view class="dis-flex margin-t-20">
					<view style="flex: 1;">下单时间</view>
					<view class="font-color-9">{{info.created_at}}</view>
				</view>
				<view class="dis-flex margin-t-20" v-if="info.status==2">
					<view style="flex: 1;">核销时间</view>
					<view class="font-color-9">{{info.use_at}}</view>
				</view>
				
			</view>
		</view>
		<view class="bottom-view" v-if="info.status==1">
			<view class="btn" @click="openDial()">核销</view>
		</view>
		
		<uni-popup ref="popup"  background-color="#fff">
			<view class="popup-content">
				<view @click="verifyOrder()" class="pop-child" style="border-bottom: 1px solid #3333330f;">扫码核销</view>
				<view @click="handVerify()" class="pop-child">手动核销</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import { mapState } from 'vuex';  
	export default {
		
		data() {
			return {
				order_id:0,
				info:{},
				disbaoming:false,
				disbaoming2:false,
				had:0,
				leave:0,
				absence:0,
				leave_section:0
			}
		},
		
		onLoad(option) {
			this.order_id =option.id
			// this.order_id =16
			this.getDetail()
		},
		computed: {
			...mapState(['hasLogin','userInfo','user_role'])
		},
		methods: {
			openDial(){
				this.$refs.popup.open('bottom')
			},
			cancelPop(){
				this.$refs.popup.close();
			},
			async getDetail() {
				let params = {
					o_id: this.order_id,
					role:this.user_role
				}
				let data = await Api.apiCall('get', Api.apiName.goods_order_detail, params,true);
				if (!data || data.code != 0) {
					return;
				}
				this.info = data.data;
				uni.setNavigationBarTitle({
					title:data.data.status_tip
				});
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
				
			},
			
			
			clipData(c_data){
				uni.setClipboardData({
					data:c_data,
					showToast:false,
					success:function(){
						uni.showToast({
							title:'订单号已复制'
						})
					}
				})
			},
			handVerify(){
				let that = this;
				uni.showModal({
				    placeholderText: '请输入核销券码',
					editable:true,
				    success: async (e)=>{
				    	if(e.confirm){
							that.cancelPop();
				    		let params = {
				    			code:e.content
				    		}
				    		let data = await Api.apiCall('post', Api.apiName.verify_order, params);
							if (!data) { //出错时
								return;
							}
							that.$api.msg(`核销成功`)
							setTimeout(function(){
								that.getDetail()
							},1500)
				    	}
				    }
				});
			},
			verifyOrder(){
				let that = this;
				uni.scanCode({
					success:function(res){
						that.cancelPop();
						let code = res.result;
						if(res.result==''){
							that.$api.msg(`券码异常`)
							return;
						}
						uni.showModal({
							title:'提示',
						    content: '确定核销该订单吗?',
						    success: async (e)=>{
						    	if(e.confirm){
						    		let params = {
						    			code:code
						    		}
						    		let data = await Api.apiCall('post', Api.apiName.verify_order, params);
									if (!data) { //出错时
										return;
									}
									that.$api.msg(`核销成功`)
									setTimeout(function(){
										that.getDetail()
									},1500)
						    	}
						    }
						});
					}
				})
			},
			
		},


	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}
	
	.container {
		height: 100vh;
		overflow: auto;
	}
	.dis-flex{
		display: flex;
	}
	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 24rpx;
		border-radius: 20rpx;
		flex-direction: column;
	}
	
	.list-img {
		padding: 20rpx;
		image {
			display: inline-block;
			width: 230rpx;
			height: 230rpx;
			border-radius: 20rpx;
		}
	}
	
	.list-title {
		margin-left: 20rpx;
		margin-top: 30rpx;
		font-size: 14px;
		width:100%;
	}
	
	.list-title-name {
		font-size: 30rpx;
		font-weight: 600;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
		width: 414rpx;
		padding-right: 10rpx;
	}
	
	.list-detail {
		display: flex;
		color: #999999;
		margin-top: 24rpx;
	}
	
	.list-date {
		color: #999999;
		margin-top: 24rpx
	}
	
	.list-op {
		margin-top: 24rpx;
		display: flex;
		color: #ff0000;
		align-items: center;
	}
	.pad-r22{
		padding-right: 22rpx;
	}
	.font-w600{
		font-weight: 600;
	}
	.sign-coin-detail{
		margin-left: 14rpx;
		font-size: 20rpx;
		border: 1px solid #ff0000;
		padding: 4rpx
	}
	.order-status{
		font-size: 30rpx;
		color:#999999;
	}
	
	.bg-white{
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		font-size: 24rpx;
	}
	.two-col{
		display: flex;
		padding: 20rpx 0rpx;
	}
	.two-col-w{
		display: flex;
		padding: 20rpx 0rpx;
	}
	.course-name{
		font-size: 32rpx;
		font-weight: 600;
	}
	.align-i-center{
		align-items: center;
	}
	.w-120{
		width: 120rpx;
		// font-weight: 600;
	}
	
	.font-s-14{
		font-size: 28rpx;
	}
	.margin-t-20{
		margin-top: 20rpx;
	}
	.font-color-9{
		color: #999999;
	}
	.dis-two-flex{
		display: flex;
		flex-direction: row;
		margin: 24rpx;
		justify-content: center;
	}
	.turn-s{
		background: #FFFFFF;
		display: flex;
		padding: 30rpx;
		width: 50%;
		border-radius: 20rpx;
		margin: 0rpx 4rpx;
		font-size: 26rpx;
	}
	.flex1{
		flex: 1;
	}
	.bottom-view{
		position: absolute;
		bottom: 0rpx;
		height: 100rpx;
		background: #f5f5f5;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.2);
	}
	.btn{
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		border: 1px solid #0191FF;
		margin: 18rpx 20rpx 18rpx 10rpx;
		padding: 2rpx 36rpx;
		color: #0191FF;
		font-size: 26rpx;
	}
	.color-h{
		color: #999999;
	}
	.popup-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #999999;
	}
	
	.opt-btn{
		flex: 1;
		font-size: 28rpx;
		// font-weight: 600;
	}
	.uni-pop .uni-popup__wrapper{
		border-top-left-radius:10rpx !important;
		border-top-right-radius:10rpx !important;
		background-color: #ff0000 !important;
	}
	.pop-child{
		padding: 60rpx 0rpx;
		width: 100%;
		text-align: center;
		background: #ffffff;
	}
</style>